<template>
  <div class="page">
    <div class="q-mt-md q-mb-md">
      <q-btn color="primary" label="添加歌单"
             @click="showDialog"/>
    </div>
    <div class="fit row no-wrap justify-start items-center content-start q-mb-md">
      <q-input dense v-model="searchKeys.name" placeholder="请输入关键字" class="q-mr-md"/>
      <q-btn color="primary" label="检索" @click="fetchData"/>
    </div>

    <q-table :rows="data"
             :columns="columns"
             row-key="id"
             v-model:pagination="pagination"
             @request="fetchData"
    >

      <template v-slot:body-cell-status="props">
        <q-td :props="props">
          <q-avatar v-if="props.value" rounded>
            <img :src="props.value.uri">
          </q-avatar>
        </q-td>
      </template>



      <template v-slot:body-cell-operation="props">
        <q-td :props="props">
          <q-btn-dropdown
              size="sm"
              split
              color="primary"
              label="编辑"
              @click="edit(props.row)">

            <q-list dense>
            </q-list>
          </q-btn-dropdown>
        </q-td>
      </template>
    </q-table>
    <create-dialog v-if="show"
                   :data="editRow"
                   @hide="hideDialog"
                   @create-success="fetchData"/>

  </div>
</template>

<script setup>
import {useDiaLog} from "../../composables/useDiaLog.js";
import {ref} from 'vue'
import {useSearch} from '../../composables/useSearch.js'
import playlistApi from '../../api/playlist.js'
import CreateDialog from './CreateDialog.vue'

const columns = [
  {
    name: 'name',
    field: 'name',
    label: '名称'
  },
  {
    name: 'cover',
    field: 'cover',
    label: '封面'
  },
  {
    name: 'status',
    field: 'status',
    align: 'center',
    label: '上架状态'
  },
  {
    name: 'operation',
    field: 'operation',
    label: '操作'
  }
];
const show=ref(false)
const {showDialog,hideDialog} =useDiaLog(show);
const searchKeys=ref({name:""})
const {data,pagination,fetchData}=useSearch(playlistApi.search,searchKeys)
const editRow = ref(null);
const edit=row=>{
  editRow.value=row
  showDialog()
}



</script>

<style scoped>

</style>